import React, { useEffect, useState } from "react";
import { addOne, deleteOne, editOne, findOne } from "./redux/actions";
import "./page.css";
// ant design的样式引入

import { Button, Table, Space } from "antd";

export default function App(props) {
  // 获取初始数据
  let commonData = props.store.getState();

  const [stuList, setstuList] = useState([]);

  useEffect(() => {
    setstuList(commonData.student); //这个是一个异步操作
  }, []); // eslint-disable-line

  stuList.forEach(function (value, index, array) {
    array[index]["key"] = index; //结果为true
  });

  // id初始脚标角标
  const [ids, setID] = useState(3);

  const addHandle = () => {
    let temp = ids;
    temp++;
    setID(temp);

    props.store.dispatch(
      addOne({
        id: ids,
        name: "李三三",
        age: 28,
        gender: "男",
        height: 180,
        phone: "15775699999",
      })
    );
    setstuList(props.store.getState().student); //这个是一个异步操作
  };

  const deleteHandle = (record) => {
    props.store.dispatch(deleteOne(record));
    setstuList(props.store.getState().student); //这个是一个异步操作
  };

  const editHandle = () => {
    console.log("修改事件");
  };

  // 查找
  const findHandle = (record) => {
    props.store.dispatch(findOne(record));
 
    console.log(commonData,"状态数据");
  
  };

  const columns = [
    {
      title: "ID",
      dataIndex: "id",
      key: "id",
    },
    {
      title: "姓名",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "年龄",
      dataIndex: "age",
      key: "age",
    },
    {
      title: "性别",
      dataIndex: "gender",
      key: "gender",
    },
    {
      title: "身高",
      dataIndex: "height",
      key: "height",
    },
    {
      title: "联系电话",
      dataIndex: "phone",
      key: "phone",
    },
    {
      title: "Action",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <a>Add</a>
          <a>Delete</a>
          <a>Edit</a>
          <a>Search</a>
        </Space>
      ),
    },
  ];

  return (
    <div>
      <div className="text">管理系统</div>
      <hr />
      <Table
        dataSource={[...stuList]}
        columns={columns}
        onRow={(record) => {
          return {
            onClick: (event) => {
              if ((record, event.target.innerHTML == "Add")) {
                addHandle();
              }
              if ((record, event.target.innerHTML == "Delete")) {
                deleteHandle(record);
              }
              if ((record, event.target.innerHTML == "Edit")) {
                editHandle(record);
              }
              if ((record, event.target.innerHTML == "Search")) {
                findHandle(record);
              }
            }, // 点击行
          };
        }}
      />
      ;
    </div>
  );
}
